<template>
  <div class="app-container home">


    <div class="content-shape">


      <div class="box-card">
        <div class="clearfix" slot="header">
          <span>筛选设置</span>
          <el-button @click="GoToSetRule" style="float: right; padding: 3px 0" type="text">预警设置</el-button>
        </div>


        <div>
          <el-radio-group size="small" v-model="timeType" @change="onChangeGroup">
            <el-radio-button v-for="(option, index) in options" :key="index"
                             :label="option.value">{{option.label}}
            </el-radio-button>
          </el-radio-group>

          <el-date-picker
            @change="onPickDate"
            value-format="yyyy-MM-dd"
            style="margin-left: 10px"
            v-if="showSelectData"
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>

        </div>

        <div>
          <el-radio-group size="small" v-model="selectWarningLevel" @change="onChangeWarningLevelGroup">
            <el-radio-button v-for="(option, index) in warningLevelOptions" :key="index"
                             :label="option.dictValue">{{option.dictLabel}}
            </el-radio-button>
          </el-radio-group>
        </div>


      </div>


      <div style="background-color: white;padding: 10px;margin-top: 10px">
        <el-row>
          <el-col :span="4" style="margin: 6px 0">
            <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckAllChange" v-model="checkAll">
              全部({{sum}})
            </el-checkbox>
          </el-col>
          <el-checkbox-group @change="handleCheckedMediaTypeChange" v-model="checkList">
            <el-col :key="index" :span="4" style="margin: 6px 0" v-for="(item, index) in checks">
              <el-checkbox :label="item.label">{{item.label}}({{item.value}})</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-row>
      </div>


      <div class="event-shape">
        <div class="handle-nav">
          <div>
            <el-button :loading="exportLoading" @click="handleExport" icon="el-icon-download" style="margin-left: 7.5px"
                       type="text">导出文章
            </el-button>
            <el-button :loading="exportLoading" @click="removeTheForecast" icon="el-icon-delete"
                       style="margin-left: 7.5px"
                       type="text">删除预警
            </el-button>
          </div>

        </div>
        <div>
          <div  >
            <el-table :data="events" @selection-change="handleSelectionChange" v-loading="loading" stripe>
              <el-table-column align="center" type="selection" width="50"/>
              <el-table-column align="center" label="下发内容">
                <template slot-scope="scope">
                  <div>

                    <div style="display: flex">
                      <el-tag effect="dark"
                              size="mini" type="danger"
                              v-if="scope.row.level==='red'">
                        红色预警
                      </el-tag>
                      <el-tag effect="dark"
                              size="mini" type="warning"
                              v-if="scope.row.level==='orange'">
                        橙色预警
                      </el-tag>
                      <el-tag color="yellow"
                              effect="light" size="mini"
                              v-if="scope.row.level==='yellow'">
                        黄色预警
                      </el-tag>

                      <div
                        style="font-weight: 700;font-size: 16px;color: #1a1a1a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                        @click="GotoDetail(scope.row.id)">
                        {{scope.row.title}}
                      </div>

                      <el-tag size="small" style="color: #006e8f;background: #a8dfef;margin-left: 10px">
                          <span v-if="scope.row.ispositive === 1">
                          正面
                        </span>
                        <span v-if="scope.row.isnegative === 1">
                          负面
                        </span>
                        <span v-if="scope.row.isneutral === 1">
                          中性
                        </span>
                      </el-tag>
                    </div>


                    <div style="margin-bottom: 12px; font-size: 12px; overflow: hidden; text-overflow: ellipsis;
                                display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;"
                    >{{scope.row.content}}
                    </div>

                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="来源" prop="siteName" width="160"/>
              <el-table-column align="center" label="发布时间" prop="publishTime" width="160"/>
            </el-table>
            <el-pagination :current-page="pageParams.pageNum"
                           :page-size="10"
                           :page-sizes="[10, 20, 50, 100]"
                           :total="eventsTotal"
                           @current-change="handleCurrentChange"
                           @size-change="handleSizeChange"
                           layout="total, sizes, prev, pager, next, jumper"
                           style="text-align: center">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {exportOpinionByIds, queryWarningList, removeTheForecast, getForecastMediaType} from "@/api/system/opinion";

  export default {
    data() {
      return {
        timeType: '',
        value1: '',
        selectWarningLevel: '',
        warningLevelOptions: [],
        showSelectData: false,
        options: [
          {label: '全部', value: ''},
          {label: '今天', value: 'today'},
          {label: '昨天', value: 'yesterday'},
          {label: '近7天', value: 'week'},
          {label: '近30天', value: 'month'},
          {label: '自定义', value: 'define'},
        ],
        // 导出遮罩层
        exportLoading: false,
        loading: false,
        sum: 0,
        isIndeterminate: true,
        checkAll: true,
        checks: [],
        checkList: [],
        eventsTotal: 0,
        events: [],
        detailInput: '',
        detailSelect: 'all',
        sensitiveInformation: '',
        ids: [],
        queryParams: {},
        pageParams: {
          pageNum: 1,
          pageSize: 10,
        },
      }
    },
    created() {
      if (this.$route.query.timeType != null) {
        this.timeType = this.$route.query.timeType
      }

      this.getDicts("warning_level").then(response => {
        this.warningLevelOptions = [];
        this.warningLevelOptions.push({dictLabel: '全部', dictValue: ''})
        let arr = response.data;
        arr.forEach(item => {
          this.warningLevelOptions.push(item);
        })
        this.initOption()
      });
    },
    methods: {
      GotoDetail(id) {
        this.$router.push({path: '/opinion/detail', query: {id: id}});
      },
      onPickDate(value) {
        console.log(value[0], value[1])
        this.queryParams.startDateTime = value[0]
        this.queryParams.endDateTime = value[1]
        this.getOption()
      },
      onChangeGroup() {
        this.showSelectData = this.timeType == "define" ? true : false
        if (this.timeType !== "define") {
          this.getOption()
        }
      },
      onChangeWarningLevelGroup() {
        this.getOption()
      },
      GoToSetRule() {
        this.$router.push('/rule/list')
      },
      /** 导出按钮操作 */
      handleExport() {
        if (this.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择文章',
            type: 'warning'
          })
          return
        }

        const params = {
          ids: this.ids,
        };

        this.$confirm('是否确认导出所选舆情数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportOpinionByIds(params);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        })
      },
      removeTheForecast() {
        if (this.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择文章',
            type: 'warning'
          })
          return
        }
        const query = {
          ids: this.ids,
        }
        removeTheForecast(query).then(response => {
          this.$message({
            showClose: true,
            message: '移除预警成功',
            type: 'success'
          })
          this.getOption()
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '移除预警失败',
            type: 'warning'
          })
        })
      },

      handleCheckedMediaTypeChange(value) {
        console.log("value", value)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.checks.length * 2;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checks.length;
        //重新请求
        this.getOption()
      },
      handleCheckAllChange(val) {
        if (val) {
          this.checkList = []
          this.checks.forEach(item => {
            this.checkList.push(item.label)
          })
        } else {
          this.checkList = []
        }
        this.isIndeterminate = false;
        if (!val) {
          this.$notify({
            title: '警告',
            message: '情选择舆情载体',
            type: 'warning'
          });
        }
        //重新请求
        this.getOption()
      },
      handleSizeChange(pageSize) {
        this.pageParams.pageSize = pageSize
      },
      handleCurrentChange(currentPage) {
        this.pageParams.pageNum = currentPage
        this.getOption();
      },
      getMediaType() {
        this.buildParam();
        getForecastMediaType(this.pageParams).then(response => {
          //初始化
          this.checks = [];
          this.sum = 0;
          response.data.forEach(item => {
            this.sum += item.value;
            let entity = {
              label: item.name,
              value: item.value
            }
            this.checks.push(entity);
            //全部选中
            this.checkList.push(entity.label);
          })
        })
      },

      initOption() {
        this.getOption()
        this.getMediaType();
      },
      handleRadioGroupChange() {
        this.getOption()
        this.getMediaType();
      },

      buildParam() {
        this.queryParams.mediaType = []
        this.queryParams.level = this.selectWarningLevel
        this.queryParams.timeType = this.timeType
        //选中媒体类型
        if (this.checkList.length > 0) {
          this.checkList.forEach(item => {
            this.queryParams.mediaType.push(item);
          })
        }

      },

      getOption() {
        this.buildParam();
        console.log(JSON.stringify(this.queryParams))
        queryWarningList(this.pageParams, this.queryParams).then(response => {
          this.events = response.rows
          this.eventsTotal = response.total
        })
      },

      handleSelectionChange(val) {
        this.ids = []
        for (let i = 0; i < val.length; i++) {
          this.ids.push(val[i].id)
        }
      },

    }
  }
</script>

<style scoped lang="scss">

  .bg {
    background-color: #eeeeee;
    height: 100%;
  }


  .box-card {
    background-color: white;
    padding: 10px;
  }

  .content-shape {
    display: flex;
    flex-direction: column;

    margin-right: 10px;
    width: 100%;
    min-height: 690px;
  }

  .search-shape {
    padding: 15px 35px;
    background-color: #fff;
  }

  .event-shape {
    margin-top: 10px;
    min-height: 600px;
    background-color: #fff;
  }

  .handle-nav {
    padding: 10px;
    right: 50px;
    top: 0px;
    display: flex;
    justify-content: space-between;
  }

</style>

<style>
  .el-divider--vertical {
    height: auto !important;
    min-height: 20px !important;
  }

  .el-radio-button {
    margin: 12px !important;
    border: none !important;
    font-size: 14px !important;
  }

  .el-radio-button__inner {
    border: none !important;
    border-radius: 4px !important;
  }

  .has-gutter > tr:first-child > th,
  .el-table__row td {
    border: none !important;
    vertical-align: text-bottom !important;
  }
</style>
